<template>
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData.index == 1 ? '编辑标签分组' : this.rowData.index == 2 ? '创建子分组' : '添加分组'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" destroy-on-close size="60%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="标签分组名称" prop="name">
                  <el-input autocomplete="off" type="text" v-model="dataForm.name" maxlength="11"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="所属标签分组">
                  <select-tree :options="options" :multiple="multiple" :value="valueMultiple" @getValue="getSelectedValue"></select-tree>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="是否必填" prop="is_must">
                  <el-radio v-model="dataForm.is_must" :label="1" :disabled="is_num ? true : false">是</el-radio>
                  <el-radio v-model="dataForm.is_must" :label="0" :disabled="is_num ? true : false">否</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  father_label_list, //树形lsit
  father_label_add, //标签分组add
  father_label_edit, //标签分组edit
} from '@/api/customer'
import SelectTree from './select-tree'

export default {
  components: { SelectTree },
  data() {
    return {
      multiple: false, //tree 多选
      valueMultiple: {}, // tree 默认回显值
      options: [], // tree数据
      timeOutCount: 0,
      showNumInput: false,
      refNum: 0,
      dataForm: {
        id: '',
        name: '',
        parent_id: '',
        is_must: '',
      },
      project: [],
      cate: [],
      rowData: {
        index: null,
      },
      is_num: false, //是否必填显示
      formLabelWidth: '150px',
      loading: false,
      drawer: false,
      rules: {
        name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }],
        is_must: [{ required: true, message: '是否必填不能为空', trigger: 'blur' }],
      },
    }
  },

  mounted() {},
  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },
  methods: {
    // tree选择值
    getSelectedValue(value) {
      this.dataForm.parent_id = value.id

      // if( value.parent_id==undefined ){
      //   this.is_num=true
      //   this.dataForm.is_must=value.is_must
      // }else{
      //    this.is_num=false
      //   this.dataForm.is_must=this.rowData.is_must

      // }
      if (value.length == 0) {
        this.is_num = false
        this.dataForm.is_must = this.rowData.is_must
      } else {
        this.is_num = true
        this.dataForm.is_must = value.is_must
      }

      console.log('选中的结果值', value)
    },

    // 编辑
    Edit(params) {
      return father_label_edit(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    // 新增
    Add(params) {
      return father_label_add(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    //   提交
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          const data = this.dataForm
          var request = this.rowData.index == 1 ? this.Edit(data) : this.Add(data)
          request
            .then((d) => {
              console.log(d)
              this.$refs.vendorRuleForm.resetFields()
              this.cancelForm()
              this.$emit('refreshList')
            })
            .catch((d) => {
              this.cancelForm()
            })
        }
      })
    },
    //   关闭弹出层
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    //   打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }
      this.rowData = row || null

      this.drawer = true
      this.openHook()
      // this.getshcoolselect()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      clearTimeout(this.timeOutCount)
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData(this.rowData)

        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }
          this.dataForm.parent_id = this.rowData.id
          this.valueMultiple = {}
          if (this.rowData.index == 1) {
            this.valueMultiple = JSON.parse(JSON.stringify(this.rowData))
            this.valueMultiple.name = this.valueMultiple.parent_name
          }
          if (this.rowData.parent_id == undefined) {
            this.is_num = false
          } else {
            this.is_num = true
          }
          if (this.rowData.index == 2) {
            this.dataForm.name = ''
            this.valueMultiple = JSON.parse(JSON.stringify(this.rowData))
            this.valueMultiple.name = this.valueMultiple.name
            this.is_num = true
          }

          if (this.rowData.index == 0) {
            this.is_num = false
          }
          console.log(this.rowData.parent_id)

          father_label_list({}).then((res) => {
            this.options = res.data.data
          })
        } else {
          this.loading = false
        }
      })
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
</style>
